import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from 'ant-design-vue/es/_util/type'
import { queryAvailableOccupationList, updateOccupationEnable } from '@/api/insurance/serveCompany'
import type { AvailableOccupationDto, InsurePeriodServeCompanyDto } from '@/api/insurance/serveCompany/types'
import { confirm } from '@/utils/util'

@Component
export class SystemOccupation extends TableRender {
    @Prop() serveCompanyInfo!: InsurePeriodServeCompanyDto

    noTablePadding = true

    @Emit('refresh')
    handleRefresh() {}

    @Watch('serveCompanyInfo')
    handleWatchServeCompanyInfo() {
        if (this.serveCompanyInfo?.id) {
            this.reloadPage()
        }
    }

    tableConfig() {
        const config = super.tableConfig()
        config.maxHeight = '300px'
        return config
    }

    tableColumnConfigOld = () =>
        [
            {
                title: '操作',
                width: 90,
                params: {
                    buttons: [
                        {
                            text: '禁用',
                            hidden: (row) => !row.enable,
                            event: (row) => () => this.handleEnable(false, row)
                        },
                        {
                            text: '启用',
                            hidden: (row) => row.enable,
                            event: (row) => () => this.handleEnable(true, row)
                        }
                    ]
                },
                slots: {
                    default: 'buttons'
                }
            }, 
            {
                field: 'occupationName',
                title: '系统可用工种'
            },
            {
                field: 'occupationLevel',
                title: '系统等级'
            },
            {
                field: 'enable',
                title: '状态',
                formatter: ({row}) => {
                    return row.enable ? '启用' : '禁用'
                }
            }
        ] as TableRenderColumnTypes<AvailableOccupationDto>

    async handleEnable(enable: boolean, row: AvailableOccupationDto) {
        if (!enable) {
            await confirm('是否禁用改工种？', '提示', {
                type: 'error'
            })
        } else {
            await confirm('是否禁用改工种？', '提示')
        }

        console.log(111)

        // await updateOccupationEnable({
        //     id: row.id,
        //     enable
        // })

        // this.handleRefresh()

    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.serveCompanyInfo?.serveCompanyId) return []
        return queryAvailableOccupationList({
            periodServeCompanyId: this.serveCompanyInfo.serveCompanyId
        })
    }

    render() {
        return (
            <div class="py-24px">
                {super.renderTable()}
            </div>
        )
    }
}

export default toNative<{ serveCompanyInfo: InsurePeriodServeCompanyDto }, { refresh: () => void }>(SystemOccupation)
